<script setup>
import {ref} from 'vue'
import Select from './Select.vue';
const test = ref('')
const states = [
  'Alabama',
  'Alaska',
  'Arkansa',
  'California',
  'Colorado',
  'Connecticut',
  'Delaware',
  'Florida',
  'Georgia',
  'Hawail',
  'Idaho',
  'Iowa',
  'Kansas',
  'Louisiana',
  'Manie',
  'Michigan',
  'Missouri',
  'Wyoming'
]


const states2 = 
[
  {value:'1',label:'Alabama'},
  {value:'2',label:'Alaska',disabled:true},
  {value:'3',label:'Arkansa'},
  {value:'4',label:'California',disabled:true},
  {value:'5',label:'Colorado'},
  {value:'6',label:'Connecticut'},
]

const remoteFilter = (query) =>{
  return new Promise((resolve)=>{
    if(query){
// 模拟异步请求
      setTimeout(()=>{

        const options = states.filter((item)=>{
          return item.toLowerCase().includes(query.toLowerCase())
        }).map(label => {
          return {label,value:label}
        })
        resolve(options)
      },500)

    }
    else{
      resolve([])
    }
  })
}
const value = ref('Iowa')

</script>
<template>
  <Select 
  v-model="value"
  placeholder="搜素远程结果"
  filterable
  remote
  :remote-method="remoteFilter"
  />

  <Select 
  v-model="value"
  placeholder="请输入"
  :options="states2"
  />
</template>